<!DOCTYPE html>
<html lang=''>

<head>
  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Document</title>
  <script src='./vue.js'></script>
</head>

<body>
  <div id='app'>
    {{message}}

    <cell>
      <!-- data 该属性是一个对象，该对象中是所有通过 slot 标签传递过来的属性 -->
      <!-- data 不是固定写法,名字是自己起的 -->
      <template #title="data">
        <!-- 如果直接使用 message 那么该属性是 app 组件中的 -->
        <h1>大标题 -- {{message}} -- {{data.age}} -- {{data.msg}}</h1>
      </template>
    </cell>
  </div>
</body>
<script>
  const app = Vue.createApp({
    data () {
      return {
        message: '你笑起来真好看'
      }
    },
  })

  app.component('cell', {
    template: `<div>
        <slot name='title' :msg='message' age='18'></slot>
        {{message}}
      </div>`,
    data () {
      return {
        message: '像夏天的太阳'
      }
    },
  })

  app.mount('#app')
</script>

</html>
